<template>
    <div>
        <el-row class="row_box">
            <div class="mid">
            <el-col :span="15" :offset="2">
                <div class="title" @click="toHome">致 信 春 日</div>
            </el-col>
            <el-col :span="2.5">
                <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" background-color="#66CCFF"
                    text-color="#fff" active-text-color="white">
                    <el-menu-item index="home">花城</el-menu-item>
                    <el-menu-item index="shoppingCart">购物车</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="2">
                <el-dropdown @command="handleDownBoxCommand">
                    <span class="el-dropdown-link">               
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </div>
        </el-row>
    </div>
</template>

<script>
//头部导航栏
export default {
    name: 'Header',
    data() {
        return {
            activeIndex: 'home'//默认home激活
        };
    },
    methods: {
        //跳转到相应的路由
        handleSelect(key, keyPath) {
            if (key == 'home') {
                this.$router.push('/home')
            } else if (key == 'shoppingCart') {
                this.$router.push('/shoppingCart')
            }
        },
        //退出
        handleDownBoxCommand(command) {
            if (command === 'logout') {
                this.logout();
            }
        },
        //退出提示信息并跳转welcome
        logout() {
            this.$message({
                type: 'success',
                message: '退出成功'
            })
            this.$router.push('/welcome')
        },
        //跳转home
        toHome() {
            this.$router.push('/home')
        }
    },
    //监听路由变化
    watch: {
        $route(to, from) {
            if (to.name == 'Home') {
                this.activeIndex = 'home'
            } else if (to.name == 'ShoppingCart') {
                this.activeIndex = 'shoppingCart'
            } else {
                this.activeIndex = ''
            }
        }
    },
}
</script>

<style scoped>
/** 背景颜色（头部）*/
.row_box {
    background-color: #c0e9ff;
}

/**网站名称 */
.title {
    letter-spacing: 2px;
    font-size: 25px;
    color: #6699FF;
    float: left;
    font-weight: 600;
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    font-style: italic;
    line-height: 61px;
}

/**登入名*/
.el-dropdown-link {
    cursor: pointer;
    color: #fff;
    font-size: 25px;
    line-height: 61px;
}

.el-icon-arrow-down {
    font-size: 10px;
}

.mid{
    margin: 0 auto;
    width: 1400px;
}
</style>
